<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>意见反馈</title>
	<meta name="format-detection" content="telephone=no">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/swiper-3.2.7.min.css">
	<link rel="stylesheet" href="css/weui.min.css">
	<link rel="stylesheet" href="css/style.css">
	<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
	<script type="text/javascript" src="js/common.js"></script>
	<script type="text/javascript" src="js/swiper-3.3.1.jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script>
</head>
<body>
	<!-- 意见反馈 -->
	<div class="opinion landing">

		<div class="header-top-return" title="头部返回">
			<a class="return-a" href="javascript:history.back(-1)">
				<h1>意见反馈</h1>
			</a>
		</div>

		<div class="title-top">
			<a class="return-history" href="javascript:history.back(-1)" title="返回上一页"></a>
			<h1>意见反馈</h1>
			<a class="return-home" href="index.html" title="返回首页"></a>
		</div>
		
		<div class="problem-types">
			<h3>选择问题类型</h3>
			<ul class="clearfix">
				<li>充值失败</li>
				<li>提个意见</li>
				<li>漫画催更</li>
				<li>顺序错乱</li>
				<li>无响应</li>
				<li>阅读卡慢</li>
			</ul>
		</div>

		<div class="textarea-box">
			<h3>选择问题类型</h3>
			<textarea name="" id="" cols="30" rows="10"></textarea>
		</div>

		<div class="uploader-img">
			<h3>图片上传</h3>
			<div class="weui-cells weui-cells_form">
				<div class="weui-cell">
					<div class="weui-cell__bd">
						<div class="weui-uploader">
							<div class="weui-uploader__bd">
								<ul class="weui-uploader__files" id="uploaderFiles">

								</ul>
								<div class="weui-uploader__input-box">
									<input id="uploaderInput" class="weui-uploader__input zjxfjs_file" type="file" accept="image/*" name="images" multiple="">
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="input-inf">
			<label for="">
				<input type="text" name="" value="" placeholder ="留下您的联系方式以便我们及时回复（可不填）">
			</label>
		</div>

		<div class="Submission-btn">
			<a href="javascript:;">提交</a>
		</div>

	</div>

	<div class="weui-gallery" id="gallery">
		<span class="weui-gallery__img" id="galleryImg"></span>
		<div class="weui-gallery__opr">
			<a href="javascript:" class="weui-gallery__del">
				<i class="weui-icon-delete weui-icon_gallery-delete"></i>
			</a>
		</div>
	</div>

	<script src="js/layer.js"></script>
	<script src="js/mui.min.js"></script>
	<script src="js/public.js"></script>
	<script>
		// 图片上传
		mui.init();
		$(function () {
		    var tmpl = '<li class="weui-uploader__file weui-uploader__file_status" style="background-image:url(#url#)"><input type="hidden" name="files[]" value=""><div class="weui-uploader__file-content">50%</div></li>',
		        $gallery = $("#gallery"),
		        $galleryImg = $("#galleryImg"),
		        $uploaderInput = $("#uploaderInput"),
		        $uploaderFiles = $("#uploaderFiles"),
		        number = 0;

		    $uploaderInput.on("change", function (e) {
		        if (number == 5) {
		            alert('最多只能五张');
		        }

		        var src, url = window.URL || window.webkitURL || window.mozURL,
		            files = e.target.files;

		        for (var i = 0, len = files.length; i < len; ++i) {
		            var file = files[i];

		            // 设置图像
		            if(url) {
		                src = url.createObjectURL(file);
		            } else {
		                src = e.target.result;
		            }
		            var $li = $(tmpl.replace('#url#', src));

		            $uploaderFiles.append($li);

		            // 图片上传
		            var formFile = new FormData();
		            formFile.append("file", file); //加入文件对象
		            $.ajax({
		                url: "/wechat.php/Upload",
		                data: formFile,
		                type: "post",
		                dataType: "json",
		                cache: false,//上传文件无需缓存
		                processData: false,//用于对data参数进行序列化处理 这里必须false
		                contentType: false, //必须
		                beforeSend: function() {
		                    // 这里是进度条
		                    
		                },
		                xhr: function(){
		                    var xhr = $.ajaxSettings.xhr();
		                    if(xhr.upload) {
		                        xhr.upload.addEventListener('progress', function (evt){
		                            var loaded = evt.loaded;                  //已经上传大小情况
		                            var tot = evt.total;                      //附件总大小
		                            var per = Math.floor(100*loaded/tot);     //已经上传的百分比
		                            // 更改进度条
		                            $('.weui-uploader__file-content').html(per);
		                        }, false);
		                    }
		                    return xhr;
		                },
		                success: function (json) {
		                    if (!json.status) {
		                        alert(json.msg);
		                        return;
		                    }

		                    $li.find('input').val(json.data.url);
		                    
		                    // 删除进度条
		                    $('.weui-uploader__file').removeClass('weui-uploader__file_status');

		                    number++;
		                }
		            });
		        }
		    });
		    var index; //第几张图片
		    $uploaderFiles.on("click", "li", function () {
		        index = $(this).index();
		        $galleryImg.attr("style", this.getAttribute("style"));
		        $gallery.fadeIn(100);
		    });
		    $gallery.on("click", function () {
		        $gallery.fadeOut(100);
		    });
		    //删除图片
		    $(".weui-gallery__del").click(function () {
		        $uploaderFiles.find("li").eq(index).remove();
		    });
		});
	</script>
</body>
</html>